<template>
  <div id="DelayEchartsMain" style="width: 60vw; height: 55vh;"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "DelayEcharts",
  props:["DelayEchartsData"],
  data() {
    return {
      data: this.DelayEchartsData,
      xData:[],
      x1:[],
      x2:[]
    };
  },
  created() {
    console.log(this.DelayEchartsData)
  },
  mounted() {
    this.LeagueJS.getTokenWaysInfo(info=>{
      console.log(info)
      let child1=[]
      let child2=[]
      let child3=[]
      info._createToken.map((i,j)=>{
        child3.push('A' + j);
        child1.push(i)
        child2.push(info._burnToken[j])
        j++
      })
      this.xData=child3
      this.x1=child1
      this.x2=child2
      this.renderEcharts();
    })
  },
  methods:{
    renderEcharts() {
      if (!document.getElementById("DelayEchartsMain")) {
        return;
      }
      const chartDom = document.getElementById("DelayEchartsMain");
      const myChart = echarts.init(chartDom);
      let option;

      // const xAxisData = [];
      // const data1 = [];
      // const data2 = [];
      // for (let i = 0; i < 100; i++) {
      //   xAxisData.push('A' + i);
      //   data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
      //   data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
      // }

      option = {
        title: {
          text: '产销图'
        },
        legend: {
          data: ['生产', '销毁']
        },
        toolbox: {
          // y: 'bottom',
          feature: {
            magicType: {
              type: ['stack']
            },
            dataView: {},
            saveAsImage: {
              pixelRatio: 2
            }
          }
        },
        tooltip: {},
        xAxis: {
          data: this.xData,
          splitLine: {
            show: false
          }
        },
        yAxis: {},
        series: [
          {
            name: '生产',
            type: 'bar',
            data: this.x1,
            emphasis: {
              focus: 'series'
            },
            animationDelay: function (idx) {
              return idx * 10;
            }
          },
          {
            name: '销毁',
            type: 'bar',
            data: this.x2,
            emphasis: {
              focus: 'series'
            },
            animationDelay: function (idx) {
              return idx * 10 + 100;
            }
          }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
          return idx * 5;
        }
      };

      option && myChart.setOption(option);
    },
  }
}
</script>

<style scoped>

</style>
